<!--
 * @Description: 员工列表
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-10-30 14:28:39
 * @LastEditors: 尹鑫
 * @LastEditTime: 2020-12-26 14:54:09
-->

<template>
  <div class="mainbox">
    <adminTable ref="refTable" :searchs="searchs" :other-show="true" :api-fun="apiFun" :table-column="tableColumn" :table-data.sync="tableData" @add-list="addClick">
      <!-- 搜索 -->
      <template slot="accountNonLocked" slot-scope="scope">
        <span v-if="scope.value.accountNonLocked" style="color:#67C23A">正常</span>
        <span v-else style="color:#F56C6C">冻结</span>
      </template>
      <template slot="gender" slot-scope="scope">
        <span v-if="scope.value.gender == 0">女</span>
        <span v-else-if="scope.value.gender == 1">男</span>
        <span v-else>&nbsp;</span>
      </template>
      <!-- 表格操作 -->
      <template slot="operate" slot-scope="scope">
        <template v-if="isAdmin">
          <el-button type="text" size="small" @click="editClick(scope.value)">编辑</el-button>
          <template v-if="userIdNow !== scope.value.userId">
            <el-button v-if="scope.value.accountNonLocked" type="text" size="small" @click="empFreezeClick(scope.value)">冻结</el-button>
            <el-button v-else type="text" size="small" @click="empFreezeClick(scope.value)">解冻</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.value)">删除</el-button>
          </template>
          <el-button type="text" size="small" @click="resetClick(scope.value)">重置</el-button>
        </template>
        <template v-else-if="scope.value.nickname!=='超级管理员'">
          <el-button type="text" size="small" @click="editClick(scope.value)">编辑</el-button>
          <template v-if="userIdNow !== scope.value.userId">
            <el-button v-if="scope.value.accountNonLocked" type="text" size="small" @click="empFreezeClick(scope.value)">冻结</el-button>
            <el-button v-else type="text" size="small" @click="empFreezeClick(scope.value)">解冻</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.value)">删除</el-button>
          </template>
          <el-button type="text" size="small" @click="resetClick(scope.value)">重置</el-button>
        </template>
      </template>
    </adminTable>
    <!-- 编辑,添加员工 -->
    <StaffAddEdit :show.sync="dialogFormVisible" :form-data.sync="formData" @refresh="refreshList" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 组件引入
import adminTable from '@/components/admin/admin-table'
import StaffAddEdit from './components/StaffAddEdit'
// 接口
import { empAll, empDelete, empRes, empFreeze } from '@/api/system'
// 页面配置
import { staffClumen, staffSearchs } from './count.js'
// 公共方法
import { openMessageBox } from '@/utils/utils'

export default {
  components: {
    adminTable,
    StaffAddEdit
  },
  data() {
    return {
      tableColumn: staffClumen,
      searchs: staffSearchs,
      tableData: [],
      areaList: [
        { label: '正常', value: '1' },
        { label: '冻结', value: '0' }
      ],
      apiFun: empAll,
      dialogFormVisible: false,
      formData: {
        genre: 'add',
        userId: '',
        avatar: '',
        nickname: '',
        username: '',
        mobile: '',
        gender: '1'
      },
      isAdmin: JSON.parse(localStorage.getItem('userInfo')).userId === '000000',
      userIdNow: JSON.parse(localStorage.getItem('userInfo')).userId
    }
  },
  computed: {
    ...mapGetters([
      'currentUserInfo'
    ])
  },
  methods: {
    // 编辑设置表单数据
    editClick(row) {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'edit',
        ...row
      }
    },
    // 添加清空表单数据
    addClick() {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'add',
        userId: '',
        avatar: '',
        username: '',
        mobile: '',
        gender: '1'
      }
    },
    // 删除点击弹出提示
    deleteClick(row) {
      openMessageBox({
        content: '删除数据后，将不可恢复，是否确认？',
        title: '删除数据',
        closeOnClickModal: false
      }, (boole) => {
        if (boole) {
          // 删除员工接口请求
          empDelete({ userId: row.userId }).then((res) => {
            this.$message({ message: '删除成功', type: 'success' })
            this.refreshList()
          })
        }
      })
    },
    // 重置
    resetClick(row) {
      openMessageBox({
        content: '账户的密码将被重置为123456，是否确认？',
        title: '重置用户',
        closeOnClickModal: false,
        distinguishCancelAndClose: true
      }, (boole) => {
        if (boole) {
          // 重置员工接口请求
          empRes({ userId: row.userId }).then((res) => {
            this.$message({ message: '重置成功', type: 'success' })
            this.refreshList()
          })
        }
      })
    },
    // 解冻/冻结
    empFreezeClick(row) {
      let msgTitle = '冻结用户'
      let msgContent = '冻结后，用户将不能再次登录系统，是否确认？'
      // 根据当前用户状态显示不同提示
      if (!row.accountNonLocked) {
        msgTitle = '解冻用户'
        msgContent = '解冻后，用户将能登录系统，是否确认？'
      }
      this.$confirm(msgContent, msgTitle, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        distinguishCancelAndClose: true
      })
        .then(() => {
          // 请求冻结,解冻接口
          empFreeze({ userId: row.userId, state: !row.accountNonLocked }).then((res) => {
            this.$message({ message: '冻结成功', type: 'success' })
            this.refreshList()
          })
        })
        .catch((cancel) => {
          console.log('取消')
        })
    },
    // 刷新列表
    refreshList() {
      this.$refs.refTable.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
